<template>
  <div class="buygood">
  <x-header :left-options="{showBack: true,  backText:''}">购买宝贝</x-header>

        <div class="good">
          <div><img src="/static/img/avatar.jpg" alt=""></div>
          <div class="g-name">
            <p>祖传新华字典</p>
            <p class="g-price">￥59.00 <br>
              <span>武汉江汉区 | 在线交易</span>
            </p>
          </div>
        </div>

        <div class="weui-cells">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>收货地址</p>
                </div>
                <div class="weui-cell__ft address-info">
                  <p>刘子树 1532533585</p>
                  <p>湖北省武汉市江汉区万松办事处</p>
                  <p>淮海路泛海国际SOHO1栋</p>
                </div>
            </a>
        </div>

        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>运费</p>
                </div>
                <div class="weui-cell__ft">快递 ￥：69.00</div>
            </div>
        </div>
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>实付金额</p>
                </div>
                <div class="weui-cell__ft">￥：69.00</div>
            </div>
        </div>
            

        <div class="buygood-foot">
          <button type="submit">确定发布</button>
        </div>
        
  </div>
</template>

<script>
import { XHeader } from 'vux'
export default {
  name: 'Personlist',
  components: {
    XHeader
  },
  data:function(){
        return {
            
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.vux-header{
  background-color: #FF4d4d;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
}
.vux-header .vux-header-title, .vux-header h1{
  color: #3f3f3f!important;
}
.buygood-foot{
  background-color: #fff;
  width: 100%;
  position: fixed;
  bottom: 0px;
  height: 5.4rem;
  z-index: 1000;
  border-top:1px solid #bababa;
}
.buygood-foot button{
  height: 4rem;
  width: 90%;
  margin-top: 0.7rem;
  margin-left: 5%;
  background-color: #fb2b34;
  border: 1px solid #fff;
  color: #fff;
  font-size: 20px;
  outline: none;
}
.weui-cells{
  margin-top: -1px;
  line-height: 5rem;
}
.good{
  margin-top: 3.8rem;
  display: flex;
  display: -webkit-flex;
  height: 120px;
  background-color: #fff;
  margin-bottom: 2rem;
}
.good div:nth-child(1){
  flex: 1;
}
.good div:nth-child(1) img{
  width: 100%;
  height: 100%;
}
.good div:nth-child(2){
  padding: 1.2rem;
  flex: 2;
  color: #3f3f3f;
}
.g-name{
  position: relative;
}
.g-name p:first-child{
  font-size: 18px!important;
}
.g-price{
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  color: #ff4d4d;
  font-size: 18px;
}
.g-price span{
  color: #969696;
  font-size: 10px;
}
</style>
